<template>
  <el-container class="mw_layout">
    <el-aside class="mw_layout_left" :class="isCollapse ? 'mss-left-off' : 'mss-left-on'">
      <div class="mw_layout_title">
        <el-icon><StarFilled /></el-icon>
        <div v-if="!isCollapse">救护车司机</div>
      </div>
      <el-menu
        background-color="#27316a"
        text-color="#ffffff"
        active-text-color="#ffd04b"
        :default-active="1"
        :collapse="isCollapse"
      >
        <template v-for="lv1 in menus">
          <el-sub-menu v-if="lv1.nodes && lv1.nodes.length > 0" :index="lv1.id" :key="lv1.id">
            <template #title><el-icon><component :is="lv1.icon"></component></el-icon> <span>{{  lv1.title || '' }}</span> </template>
            <template v-for="lv2 in lv1.nodes">
              <el-sub-menu v-if="lv2.nodes && lv2.nodes.length > 0" :index="lv2.id" :key="lv2.id">
                <template #title><el-icon><component :is="lv2.icon"></component></el-icon>{{  lv2.title || '' }}</template>
                <template v-for="lv3 in lv2.nodes" :key="lv3.id">
                  <el-menu-item :index="lv3.id" @click="gotoPage(lv3.path)">
                    <el-icon><component :is="lv3.icon"></component></el-icon>
                    <template #title>{{ lv3.title || ''}} </template>
                  </el-menu-item>
                </template>
              </el-sub-menu>
              <el-menu-item v-else :index="lv2.id" :key="lv2.title" @click="gotoPage(lv2.path)">
                <el-icon><component :is="lv2.icon"></component></el-icon>
                <template #title>{{ lv2.title || ''}} </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item v-else :index="lv1.id" :key="lv1.title" @click="gotoPage(lv1.path)">
            <el-icon><component :is="lv1.icon"></component></el-icon>
            <template #title>{{ lv1.title || ''}} </template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container class="mw_layout_right">
      <el-header class="mw_operate">
        <div class="mw_switch" @click="switchMenu">
          <el-button class="mw_bth" text v-if="isCollapse" :icon="Fold" />
          <el-button class="mw_bth" text v-else :icon="Expand" />
        </div>
        <div class="mw_avatar">
          <div>123123</div>
          <el-popover
            :width="300"
            popper-style="margin: 0 5px;box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
            </template>
            <template #default>
              <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
              >
                <el-avatar
                  :size="60"
                  src="https://avatars.githubusercontent.com/u/72015883?v=4"
                  style="margin-bottom: 8px"
                />
                <div>
                  <p
                    class="demo-rich-content__name"
                    style="margin: 0; font-weight: 500"
                  >
                    Element Plus
                  </p>
                  <p
                    class="demo-rich-content__mention"
                    style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                  >
                    @element-plus
                  </p>
                </div>

                <p class="demo-rich-content__desc" style="margin: 0">
                  Element Plus, a Vue 3 based component library for developers,
                  designers and product managers
                </p>
              </div>
            </template>
          </el-popover>
        </div>
      </el-header>
      <el-main class="mw_layout_view">
        <div class="mw_layout_content">
          <slot></slot>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { Fold, Expand } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance } from "vue"

const instance = getCurrentInstance();

const isCollapse = ref(false);

const menus = reactive([
  {
    id: 1,
    title: "首页", 
    icon: "House",
    path: "/",
    nodes: []
  }, {
    id: 2,
    title: "摄像头", 
    icon: "CameraFilled",
    path: "/404",
    nodes: []
  }, {
    id: 3,
    title: "司机", 
    icon: "Avatar",
    path: "/homeTow",
    nodes: []
  }, {
    id: 4,
    title: "救护车", 
    icon: "Promotion",
    path: "/错误的路由",
    nodes: []
  }
])

function switchMenu() {
  isCollapse.value = !isCollapse.value;
}

function gotoPage(path) {
  if (instance != null) {
      const _this = instance.appContext.config.globalProperties; //vue3获取当前this
      if (!path) console.error("请传路径地址");
      _this.$router.push({path, query: {}})
  }
}
</script>
<style scoped lang='less'>
.mw_layout{
  display: flex;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  .mss-left-off {
    flex: 0 0 63px;
  }
  .mss-left-on {
    flex: 0 0 260px;
  }
  .mw_layout_left{
  transition: all 0.3s;
    background-color: #27316a;
    .mw_layout_title{
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #ffffff;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
    }
  }
  .mw_layout_right{
    flex: 1;
    height: 100vh;
    overflow: auto;
    background-color: #eceff8;
    .mw_layout_view{
      background-color: #eceff8;
      padding: 20px;
      .mw_layout_content{
        background-color: #ffffff;
        height: calc(100vh - 100px);
        overflow: auto;
        padding: 15px;
        box-shadow: 4px 4px 8px -2px #cddbf0;
      }
    }
    .mw_operate{
      width: 100%;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 8px -2px #cddbf0;
      .mw_avatar{
        display: flex;
        align-items: center;

      }
      .mw_switch{
        .mw_bth{
          width: 50px;
          height: 50px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>